<template>
    <div>
        <!-- <Select
            v-model="params.disease"
            class="ivu-mb-8"
            style="width: 300px;"
            multiple
            clearable
            @on-change="askData"
        >
            <Option
                v-for="item in diseaseList"
                :value="item.id"
                :key="item.id"
                >{{ item.diseases_name }}</Option
            >
        </Select> -->
        <TreeSelect
            :max-tag-count="5"
            class="ivu-mb-8"
            style="width: 300px;"
            placeholder="请选择病种"
            @on-change="disabledfun"
            v-model="params.disease"
            :data="diseaseList"
            filterable
            multiple />
        <Row :gutter="48">
            <Col span="12">
            <Card :bordered="false" dis-hover>
                <Row>
                    <Col span="10" class="sky-tit">项目到诊排行</Col>
                    <Col span="14" class="ivu-text-right">
                    <Form>
                        <FormItem>
                            <RadioGroup
                                v-model="params.type1"
                                type="button"
                                @on-change="changeRadio(1)"
                            >   <Radio label="4">上周</Radio>
                                <Radio label="1">月</Radio>
                                <Radio label="2">周</Radio>
                                <Radio label="3">上月</Radio>
                            </RadioGroup>
                        </FormItem>
                    </Form>
                        </Col>
                </Row>

                <Table highlight-row :columns="columns" :data="itemList1">
                    <template slot="ranking" slot-scope="{ row, index }">
                        <Badge
                            v-if="(index + 1+(page-1)*pageSize) === 1"
                            type="error"
                            :count="(index + 1+(page-1)*pageSize)"
                        />
                        <Badge
                            v-else-if="(index + 1+(page-1)*pageSize) === 2"
                            type="warning"
                            :count="(index + 1+(page-1)*pageSize)"
                        />
                        <Badge
                            v-else-if="(index + 1+(page-1)*pageSize) === 3"
                            type="primary"
                            :count="(index + 1+(page-1)*pageSize)"
                        />
                        <Badge v-else type="normal" :count="index + 1+(page-1)*pageSize" />
                    </template>
                    <template slot="info" slot-scope="{ row }">
                        <Avatar class="ivu-mr-8">{{
                            row.realname.substr(0, 1)
                        }}</Avatar>
                        {{ row.realname }}
                    </template>
                </Table>
                <div
                    class="ivu-mt iuv-text-center"
                    style="text-align: center;"
                >
                    <Page
                        show-total
                        show-elevator
                        show-sizer
                        :simple=true
                        :total="total"
                        :current.sync="page"
                        :page-size="pageSize"
                        @on-change="changepage"
                    />
                </div>
            </Card>
                 
            </Col>
            <Col span="12">
            <Card :bordered="false" dis-hover>
                <Row>
                    <Col span="10" class="sky-tit">项目完成度排行</Col>
                    <Col span="14" class="ivu-text-right">
                    <Form>
                        <FormItem>
                            <RadioGroup
                                v-model="params.type2"
                                type="button"
                                @on-change="changeRadio(2)"
                            >
                                <Radio label="1">月</Radio>
                                <Radio label="2">周</Radio>
                            </RadioGroup>
                        </FormItem>
                    </Form>
                        </Col>
                </Row>

                <Table highlight-row :columns="columns1" :data="itemList2">
                    <template slot="ranking" slot-scope="{ row, index }">
                        <Badge
                            v-if="index + 1 === 1"
                            type="error"
                            :count="index + 1"
                        />
                        <Badge
                            v-else-if="index + 1 === 2"
                            type="warning"
                            :count="index + 1"
                        />
                        <Badge
                            v-else-if="index + 1 === 3"
                            type="primary"
                            :count="index + 1"
                        />
                        <Badge v-else type="normal" :count="index + 1" />
                    </template>
                    <template slot="info" slot-scope="{ row }">
                        <Avatar class="ivu-mr-8">{{
                            row.realname.substr(0, 1)
                        }}</Avatar>
                        {{ row.realname }}
                    </template>
                    <template slot="progress" slot-scope="{ row }">
                        <Progress
                            :percent="+row.rate >= 100 ? 100 : row.rate"
                        >{{ row.rate }}%</Progress
                        >
                    </template>
                </Table>
                    
            </Card>
            </Col>
            <Col span="8" v-if="false">
            <Card :bordered="false" dis-hover>
                <Row>
                    <Col span="10" class="sky-tit">集团到诊排行</Col>
                    <Col span="14" class="ivu-text-right">
                    <Form>
                        <FormItem>
                            <RadioGroup
                                v-model="params.type3"
                                type="button"
                                @on-change="changeRadio(3)"
                            >
                                <Radio label="1">月</Radio>
                                <Radio label="2">周</Radio>
                                <Radio label="3">上月</Radio>
                            </RadioGroup>
                        </FormItem>
                    </Form>
                        </Col>
                </Row>

                <Table highlight-row :columns="columns2" :data="itemList3">
                    <template slot="ranking" slot-scope="{ row, index }">
                        <Badge
                            v-if="index + 1+(page-1)*pageSize === 1"
                            type="error"
                            :count="(index + 1+(page-1)*pageSize)"
                        />
                        <Badge
                            v-else-if="index + 1+(page-1)*pageSize === 2"
                            type="warning"
                            :count="(index + 1+(page-1)*pageSize)"
                        />
                        <Badge
                            v-else-if="index + 1+(page-1)*pageSize === 3"
                            type="primary"
                            :count="(index + 1+(page-1)*pageSize)"
                        />
                        <Badge v-else type="normal" :count="index + 1+(page-1)*pageSize" />
                    </template>
                    <template slot="info" slot-scope="{ row }">
                        <Avatar class="ivu-mr-8">{{
                            row.realname.substr(0, 1)
                        }}</Avatar>
                        {{ row.realname }}
                    </template>
                </Table>
            </Card>
            </Col>
        </Row>
        <Drawer
            :title="chartTitle"
            v-model="showDetail"
            width="1000"
            class="mycontrol"
            :mask-closable="true"
        >
            <personnelFile :dateType="dateType" :showDetail="showDetail" :useInfo="useInfo" :currentPro="currentPro"/>
        </Drawer> 
    </div>
     
</template>
<script>
import {
    leaderboardprojectvisit,
    leaderboardprojectcomplete,
    leaderboardgroupvisit,
    patientdiseasesparentlist,
    rankCondition
} from '@api/hqapi';
import personnelFile from './personnelFile';
export default {
    name: 'ranking',
    components: { personnelFile },
    data() {
        return {
            dayDate: 'month',
            params: { type1: '1', type2: '1', type3: '1', disease: [] },
            columns: [
                { title: '排名', key: 'ranking', slot: 'ranking' },
                { title: '咨询员', slot: 'info' },
                { title: '已到', key: 'visit_count', width: 100 },
                { title: '操作', minWwidth: 120,align: 'right',
                 render: (h, {row}) => {
                          return h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.chartTitle = `X档案 - ${row.realname}`;
                                        this.dateType = this.params.type1;
                                        this.useInfo = row;       
                                        this.useInfo.sort = row._index + 1 + (this.page - 1) * this.pageSize;                              
                                        this.currentPro = localStorage.getItem('currentProject');
                                        this.showDetail = true;                                        
                                    }
                                }
                            }, 'X档案');
                        } 
                }      
            ],
            columns2: [
                { title: '排名', key: 'ranking', slot: 'ranking' },
                { title: '咨询员', slot: 'info' },
                { title: '已到', key: 'visit_count', width: 100 },
                { title: '操作', minWwidth: 120,align: 'right',
                 render: (h, {row}) => {
                          return h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.chartTitle = `X档案 - ${row.realname}`;
                                        this.dateType = this.params.type3;
                                        this.useInfo = row;
                                        this.useInfo.sort = row._index + 1 + (this.page - 1) * this.pageSize;
                                        this.currentPro = 0;
                                        this.showDetail = true;
                                        
                                    }
                                }
                            }, 'X档案');
                        } 
                }      
            ],
            total: 0,
            page: 1,
            pageSize: 9,
            itemList1: [],
            itemList2: [],
            itemList3: [],
            diseaseList: [],
            columns1: [
                { title: '排名', slot: 'ranking', width: 65 },
                { title: '咨询员', slot: 'info', width: 160 },
                { title: '进度', slot: 'progress', minWwidth: 100 }              
            ],
            showDetail: false,
            chartTitle: '',
            dateType: '',
            useInfo: '',
            currentPro: ''      
        };
    },
    methods: {
        /* @函数功能: 初始化 */
        initial() {
            rankCondition({ leader: 1 }).then((res) => {
                this.diseaseList = res.disease;
            });
            this.askData();
        },
        askData() {
            this.askData1();
            this.askData2();
            this.askData3();
        },
        /* @函数功能: 请求数据 */
        askData1() {
            leaderboardprojectvisit({
                type: this.params.type1,
                disease: this.params.disease.join(','),
                page: this.page,
                pageSize: this.pageSize
            }).then((res) => {               
                this.itemList1 = res.list;
                this.total = res.total;
            });
        },
        /* @函数功能: 请求数据 */
        askData2() {
            leaderboardprojectcomplete({
                type: this.params.type2,
                disease: this.params.disease.join(','),
            }).then((res) => {
                this.itemList2 = res;
            });
        },
        /* @函数功能: 请求数据 */
        askData3() {
            leaderboardgroupvisit({
                type: this.params.type3,
                disease: this.params.disease.join(','),                
            }).then((res) => {
                this.itemList3 = res.list;                
            });
        },
        disabledfun(){
            this.askData();
        },
        changeRadio(num) {
            if (num === 1) {
                this.askData1();
            } else if (num === 2) {
                this.askData2();
            } else if (num === 3) {
                this.askData3();
            }
        },
        changepage(e) {
            this.page = e;
            this.askData1();
        }
    },
    /* 挂载完成能访问DOM元素 */
    mounted() {
        this.initial();
    },
};
</script>
<style scoped>
.sky-tit {
    font-size: 16px;
    font-weight: bold;
    line-height: 36px;
}
.ivu-mt-32{
    margin-top: 28px !important;
}
.mycontrol >>> .ivu-drawer-header-inner{
    font-size: 20px !important;
    text-align: center !important;    
    color: #fff;
}
.mycontrol >>> .ivu-drawer-header{
    background: #191a23 ;
}
.mycontrol >>> .ivu-drawer-close .ivu-icon-ios-close{
    color: #fff;
}
.mycontrol >>> h3{
    font-size: 16px;
    color: #fff;
    text-align: center;
    background: #17233d;
    line-height: 36px;
}
</style>
